<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端页面元素：按钮</title>
    <link rel="stylesheet" href="../lib/jquery.mobile-1.4.5.min.css">
    <script src="../lib/jquery-1.11.3.min.js"></script>
    <script src="../lib/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <!-- 按钮两种：button a标签 -->
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>按钮效果</h1>
        </div>
        <div data-role="main" class="ui-content">
            <!-- 第1种按钮，没有提交数据 -->
            <button class="ui-btn">按钮</button>
            <!-- 第2种按钮，a标签方式 跳转页面-->
            <!-- 按钮图标 data-role="button"  -->
            <a href="#pagetwo" class="ui-btn ui-icon-arrow-r ui-btn-icon-right">A标签按钮</a>
            <!-- 第3种按钮, input标签，提交数据  -->
            <input type="button" value="按钮">
        </div>
        <div data-role="footer">
            <h1>页面底部</h1>
        </div>
    </div>
    <!-- 第2页面 -->
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>第二个页面</h1>
        </div>
        <div data-role="content" >
            <p>第二页内容</p>
            <!-- data-role="button" -->
            <a href="#pageone" class="ui-btn ui-icon-back ui-btn-icon-left">返回第一页面</a>
        </div>
        <div data-role="footer">
            <h1>第二页面底部</h1>
        </div>
    </div>
</body>
</html>